<template>
  <el-badge :value="totalCount" class="bounceIn">
    <div
      class="card-wrapper activity-card"
      :class="[totalCount == 0 ? 'activity-card-empty' : '']"
      @click="cardClick"
      @contextmenu.prevent="announcement(true)"
      @mousemove="isHovering = true"
      @mouseout="isHovering = false"
    >
      <div class="activity-card-title" v-if="showContent">
        <span>活动概要</span>
      </div>
      <el-scrollbar height="100px">
        <div class="activity-card-content" v-if="showContent">
          <span
            v-if="diversionCount"
            class="content-unit-tag content-marked-tag vibrate-slight"
          >
            <el-icon style="transform: translateY(2px)"><BellFilled /></el-icon>
            <span>改航 x{{ diversionCount }}</span>
          </span>
          <span v-for="unit in militaryActivities">
            <span class="content-unit-tag">{{ unit }}</span>
          </span>
          <!-- <span v-if="militaryActivities.length == 0">
            <span class="content-unit-tag content-unit-tag-null">空域活动</span>
          </span> -->
          <span v-for="activity in generalActivities">
            <span class="content-unit-tag">{{ activity.callsign }}</span>
          </span>
          <!-- <span v-if="generalActivities.length == 0">
            <span class="content-unit-tag content-unit-tag-null">通航活动</span>
          </span> -->
          <span v-for="taskName in vitalTasks">
            <span class="content-unit-tag">{{ taskName }}</span>
          </span>
          <!-- <span v-if="vitalTasks.length == 0">
            <span class="content-unit-tag content-unit-tag-null">重要任务</span>
          </span> -->
          <!-- <span v-for="item in diversionFlights">
            <span class="content-unit-tag">{{ item }}</span>
          </span> -->
        </div>
      </el-scrollbar>
      <!-- <div v-else class="content-unit-tag">无活动</div> -->
      <div class="activity-card-footer" v-if="showContent">
        <span
          :class="[
            'activity-card-footer-content',
            isHovering ? 'activity-card-footer-content-hovered' : '',
          ]"
          >点击卡片查看详情</span
        >
      </div>
    </div>
  </el-badge>
</template>

<script setup>
import { h, ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import useAvtivityStore from "@/store/activity";
const activityStore = useAvtivityStore();
const route = useRoute();
const router = useRouter();
const isHovering = ref(false);
const showContent = ref(true);

const cardClick = () => {
  router.push("/activity/Briefing");
};

const concernedAirports = computed(() => activityStore.concernedAirports);

const concernedMilitaries = computed(() => activityStore.concernedMilitaries);

const generalActivities = computed(() => activityStore.generalStatus);

const vitalTasks = computed(() => {
  let tasks = new Array();
  activityStore.impotrantStatus.forEach((item) => {
    if (
      concernedAirports.value.includes(item.arrivalAirport) ||
      concernedAirports.value.includes(item.departureAirport) ||
      concernedAirports.value.includes(item.alternateAirport) ||
      item.arrivalAirport == "" ||
      item.departureAirport == ""
    ) {
      // TMA related airports
      let today = dayjs();
      if (
        today.isSame(item.ETD, "day") ||
        today.isSame(item.ETA, "day") ||
        (today.isSameOrAfter(item.ETD) && today.isSameOrBefore(item.ETA)) ||
        (today.diff(item.ETD, "hour") <= 0 &&
          today.diff(item.ETD, "hour") >= -36) ||
        (today.diff(item.ETA, "hour") <= 0 &&
          today.diff(item.ETA, "hour") >= -36)
      ) {
        // date related
        let grade =
          item.taskGrade == 1
            ? "VIP"
            : item.taskGrade == 2
            ? "II级"
            : item.taskGrade == 3 || item.taskGrade == 0
            ? "I级"
            : "未知";
        tasks.push(`${grade}: ${item.flightNumber}`);
      }
    }
  });
  return tasks;
});

const militaryActivities = computed(() => {
  let activity = new Array();
  for (let i = 0; i < activityStore.militaryStatus.length; i++) {
    let task = activityStore.militaryStatus[i];
    if (
      !activity.includes(task.arrField) &&
      concernedMilitaries.value.includes(task.arrField)
    ) {
      activity.push(task.arrField);
    }
    if (
      !activity.includes(task.depField) &&
      concernedMilitaries.value.includes(task.depField)
    ) {
      activity.push(task.depField);
    }
    if (
      !activity.includes(task.unit) &&
      concernedMilitaries.value.includes(task.unit)
    ) {
      activity.push(task.unit);
    }
  }
  return activity;
});

const diversionFlights = computed(() =>
  activityStore.currentDiversion
    .filter((cell) => cell.status > 0)
    .map((cell) => {
      let acid = cell.acid;
      let gate = cell.route2.split(" ")[0];
      if (gate.length > 5) {
        gate = gate.substring(0, 4);
      }
      return { acid, gate };
    })
);

const diversionCount = computed(() => diversionFlights.value.length);
// const diversionExists = computed(() => diversionFlights.value.length > 0);

const totalCount = computed(
  () =>
    militaryActivities.value.length +
    generalActivities.value.length +
    vitalTasks.value.length +
    (diversionCount.value ? 1 : 0)
);

const announcement = (force) => {
  activityStore.fetchMilitaryChanges(
    { status: 0, respond: [], origion: [], equal: false, loaded: true },
    force
  );
};

const refreshContent = async () => {
  showContent.value = false;
  nextTick();
  showContent.value = true;
};

const timmerCode = ref(null);

onMounted(() => {
  timmerCode.value = setInterval(() => refreshContent(), 15 * 1000);
});

onUnmounted(() => {
  clearInterval(timmerCode.value);
  timmerCode.value = null;
});
</script>

<style scoped>
@import "@/styles/card.css";
@import "@/styles/vibrate.css";
@import "@/styles/blinking.css";

:root {
  /* 黛色 */
  /* background-color: #574266; */
  /* 黛绿 */
  /* background-color: #426666; */
  /* 黛蓝 */
  /* background-color: #425066; */
  /* 黛紫 */
  /* background-color: #574266; */
  /* 御召茶 */
  /* background-color: #43676b; */
  /* 千歳緑 */
  /* background-color: #316745; */
  /* background-color: rgb(49, 103, 69); */
  /* background-color: rgb(64, 168, 96); */

  /* --main-color: #5a466e; */
  --main-color: #6a465e;
}

.activity-card {
  /* background-color: #de6449; */
  background-color: var(--theme-color-activity-card);
  height: 160px;
  font-size: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.activity-card-empty {
  height: 30px;
}
.activity-card-title {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.activity-card-content {
  padding: 6px 0;
  text-align: center;
}

.activity-card-footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  text-shadow: none;
  transition: all 0.3s ease-in-out;
  height: 20px;
}

.activity-card-footer-content {
  font-size: 12px;
  transition: all 0.3s ease-in-out;
  transform: scale(0.9) translateY(-4px);
  opacity: 0;
}

.activity-card-footer-content-hovered {
  opacity: 1;
}

.content-unit-tag {
  display: inline-block;
  padding: 2px 4px;
  margin: 2px;
  background-color: #fff;
  /* color: rgb(64, 168, 96); */
  /* color: #425066; */
  /* color: #de6449; */
  color: var(--theme-color-activity-card);
  border-radius: 12px;
  text-shadow: none;
  font-size: 12px;
  /* font-weight: bold; */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.content-marked-tag {
  width: auto;
  font-weight: bolder;
  background-color: var(--el-color-warning);
}

.content-unit-tag-null {
  opacity: 0.5;
  /* font-style: italic; */
  text-decoration: line-through 2px;
}
</style>

<style>
@import "@/styles/colors.css";
</style>
